<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <p>一级菜单/二级菜单/</p>
        <p>三级菜单</p>
      </el-header>
      <el-main>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="素材名称">
            <el-input v-model="formInline.user" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="素材类别">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="main">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="素材名" prop="id" />
            <el-table-column label="类别" prop="category" />
            <el-table-column label="上传者" prop="Price" />
            <el-table-column label="联系方式" prop="Price" />
            <el-table-column label="提审日期" prop="Price" />

            <el-table-column
              label="审核日期"
              prop="Auditdate"
              :formatter="formatDate"
            />
            <el-table-column label="审核状态" prop="Price" />

            <el-table-column label="操作" prop="promotersID"
              ><template #default="{ row }">
                <el-button type="text" size="mini" @click="handleEdit(row)"
                  >审核</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              :current-page="page.page"
              :page-sizes="[5, 10]"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { getMaterial } from '@/views/audit/table';
import { getMaterialTotal } from '@/views/audit/table';

export default {
  data() {
    return {
      centerDialogVisible: false,
      formInline: {
        user: '',
        region: '',
      },
      tableData: [],
      search: '',
      page: {
        total: 0,
        page: 1, // 当前页面
        size: 5,
      },
    };
  },
  created() {
    this.getMaterial();
    this.getMaterialTotal();
  },
  methods: {
    async getMaterial() {
      const { data } = await getMaterial(this.page);
      console.log(data);
      this.tableData = data;
      // this.total = data.length;
      // console.log(total);
    },
    async getMaterialTotal() {
      const { data } = await getMaterialTotal();
      console.log(data);
      this.data = data;
      this.page.total = data.length;
      console.log(data.length);
    },
    // 编辑素材
    async editMaterial() {
      const { data } = await editMaterial()
      console.log(data);
    },
    onSubmit() {
      console.log('submit!');
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.getMaterial();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getMaterial();
      console.log(`当前页: ${val}`);
    },
    formatDate(Auditdate) {
      var auditDate = new Date(Auditdate.Auditdate);
      // console.log(auditDate);
      var YY = auditDate.getFullYear() + '-';
      var MM =
        (auditDate.getMonth() + 1 < 10
          ? '0' + (auditDate.getMonth() + 1)
          : auditDate.getMonth() + 1) + '-';
      var DD = auditDate.getDate() < 10 ? '0' + auditDate.getDate() : auditDate.getDate();
      var hh =
        (auditDate.getHours() < 10 ? '0' + auditDate.getHours() : auditDate.getHours()) + ':';
      var mm =
        (auditDate.getMinutes() < 10 ? '0' + auditDate.getMinutes() : auditDate.getMinutes()) + ':';
      var ss = auditDate.getSeconds() < 10 ? '0' + auditDate.getSeconds() : auditDate.getSeconds();
      return YY + MM + DD + ' ' + hh + mm + ss;
    },
  },
};
</script>

<style lang="scss">
.app-container {
  background-color: #f0f2f5;
  width: 100%;
  height: 100%;
  .el-container {
    height: 685px;
    .el-header {
      background-color: #fff;
      margin-bottom: 20px;
      height: 40px !important;
      font-size: 13px;
      p {
        float: left;
      }
    }
    .el-main {
      background-color: #fff;
      p {
        float: left;
        font-size: 14px;
        font-weight: 0;
        margin: 0;
        line-height: 25px;
      }
      .el-input {
        width: 150px;
        .el-input__inner {
          height: 25px !important;
        }
      }
      .el-button {
        padding: 7px 10px;
      }
      .main {
        .el-alert {
          background-color: #e6f7ff;
          color: #51575a;
        }
      }
    }
  }
}
</style>
